<script setup>
import { reactive, ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { siteReservationAPI, getReservationAPI } from '@/api/site'
import TimeRange from './components/TimeRange.vue'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
import dayjs from 'dayjs'
const today = dayjs()
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const datePicker = ref([])

const initDateList = (days) => {
  // console.log(today.format('YYYY-MM-DD'), '12===')
  selectDate.value = today.format('YYYY-MM-DD')
  let dateList = []
  for (let i = 0; i < days; i++) {
    dateList.push({
      day: today.add(i, 'day').format('YYYY-MM-DD'),
      week: weekdays[today.add(i, 'day').day()],
    })
  }
  return dateList
}

const selectDate = ref('')
const activeIndex = ref(0)
const setIndex = (index, item) => {
  activeIndex.value = index
  getReservation({ siteId: form.siteId, date: item.day })
}

const timeList1 = ref([])
const timeList2 = ref([])
const getReservation = async (params) => {
  const res = await getReservationAPI(params)
  timeList1.value = res.data.filter((item) => item.timePeriod == 1) || []
  timeList2.value = res.data.filter((item) => item.timePeriod == 2) || []
}

// 上午
const morning = ref(null)
const selectChange = (data) => {
  console.log(data, afternoon.value, '30===')
  afternoon.value.resetIndex(-1)
  reservationParams.startTime = data.startTime.slice(0, 5)
  reservationParams.endTime = data.endTime.slice(0, 5)
}

// 下午
const afternoon = ref(null)
const selectChange2 = (data) => {
  console.log(data, morning.value, '37===')
  morning.value.resetIndex(-1)
  reservationParams.startTime = data.startTime.slice(0, 5)
  reservationParams.endTime = data.endTime.slice(0, 5)
}

// 提交预约
const form = reactive({
  siteId: '',
  reservationDate: '',
})

const reservationParams = reactive({
  startTime: '',
  endTime: '',
  reservedPeople: '1',
  name: '',
  phone: '',
})

const submitReserve = async () => {
  if (!reservationParams.startTime) {
    return uni.showToast({
      title: '请选择时间段',
      icon: 'none',
    })
  }
  const { msg } = await siteReservationAPI({
    ...form,
    ...reservationParams,
  })
  uni.showToast({
    title: msg,
    icon: 'none',
  })
}

// 日历组件
const calendar = ref(null)
const openCalendar = () => {
  calendar.value.open()
}
const confirm = (data) => {
  console.log(data, '95===')
  const index = datePicker.value.findIndex((item) => item.day == data.fulldate)
  const item = datePicker.value.find((item) => item.day == data.fulldate)
  console.log(index, item, '99===')
  if (!item) {
    setIndex(index, { day: data.fulldate })
  } else {
    setIndex(index, item)
  }
}

onLoad((options) => {
  reservationParams.name = memberStore.profile.nickName
  reservationParams.phone = memberStore.profile.phonenumber
  console.log(options, '19===')
  form.siteId = options.siteId
  form.reservationDate = options.date
})

onMounted(() => {
  datePicker.value = initDateList(7)
  const index = datePicker.value.findIndex(
    (item) => item.day == form.reservationDate
  )
  const item = datePicker.value.find((item) => item.day == form.reservationDate)
  console.log(index, '103===')
  setIndex(index, item)
})
</script>

<template>
  <view class="reservation">
    <!-- 日历组件 -->
    <uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
    <!-- 头部 -->
    <view class="header-view flex-center">
      <view class="date-list flex-center">
        <view class="left-arrow">
          <image
            src="@/static/images/active/left-arrow.png"
            mode="aspectFill"
          />
        </view>
        <scroll-view scroll-x="true" class="date-view">
          <view
            class="date-item"
            :class="activeIndex == index ? 'active' : ''"
            v-for="(item, index) in datePicker"
            :key="index"
            @click="setIndex(index, item)"
          >
            <view class="day">{{
              item.day == today.format('YYYY-MM-DD')
                ? '今日'
                : item.day.slice(-5)
            }}</view>
            <view class="date">{{ item.week }}</view>
          </view>
        </scroll-view>
        <view class="right-arrow">
          <image
            src="@/static/images/active/right-arrow.png"
            mode="aspectFill"
          />
        </view>
      </view>
      <image
        @click="openCalendar"
        class="date-img"
        src="@/static/images/active/date.png"
        mode="aspectFill"
      />
    </view>
    <!-- 占位 -->
    <view class="space"></view>
    <!-- 时间段 -->
    <view class="time-range">
      <view class="label">上午时间段</view>
      <TimeRange ref="morning" @change="selectChange" :dataList="timeList1" />

      <view class="label">下午时间段</view>
      <TimeRange
        ref="afternoon"
        @change="selectChange2"
        :dataList="timeList2"
      />
    </view>
    <!-- 占位 -->
    <view class="space"></view>
    <!-- 联系方式 -->
    <view class="form">
      <view class="form-item">
        <view class="label">姓名</view>
        <input
          disabled
          v-model="reservationParams.name"
          class="uni-input"
          placeholder="请输入姓名"
        />
      </view>
      <view class="form-item">
        <view class="label">联系方式</view>
        <input
          disabled
          v-model="reservationParams.phone"
          class="uni-input"
          placeholder="请输入姓名"
        />
      </view>
      <view @click="submitReserve" class="submit">提交</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.reservation {
  .header-view {
    padding: 20rpx 32rpx 40rpx;

    .date-list {
      flex: 1;
      .left-arrow,
      .right-arrow {
        width: 30rpx;
        height: 92rpx;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 12rpx;
          height: 24rpx;
        }
      }

      .date-view {
        width: 500rpx;
        margin: 0 32rpx;
        white-space: nowrap;
        .date-item {
          border: 1px solid transparent;
          width: 126rpx;
          display: inline-block;
          padding: 6rpx 0;
          border-radius: 8px;
          text-align: center;
          .day {
            color: #666666;
            font-size: 28rpx;
            font-weight: 500;
          }
          .date {
            color: #666666;
            font-size: 28rpx;
            font-weight: 400;
          }
        }
      }
    }
    .date-img {
      width: 54rpx;
      height: 54rpx;
      flex-shrink: 0;
      margin-left: 30rpx;
    }
  }

  .time-range {
    padding: 0 36rpx 56rpx;
    .label {
      color: #000000;
      font-size: 32rpx;
      font-weight: 500;
      margin-bottom: 30rpx;
      margin-top: 40rpx;
    }
  }

  .form {
    padding: 46rpx 52rpx 148rpx;
    .form-item {
      margin-bottom: 32rpx;
      display: flex;
      align-items: center;
      .label {
        width: 120rpx;
        font-size: 28rpx;
        color: rgba(51, 51, 51, 1);
        margin-right: 16rpx;
      }
      .uni-input,
      .value {
        padding: 0 34rpx;
        flex: 1;
        height: 90rpx;
        border-radius: 12rpx;
        background: rgba(245, 245, 245, 0.6);
        backdrop-filter: blur(4px);
      }
      .value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #999999;
        .right-icon {
          image {
            width: 16rpx;
            height: 24rpx;
          }
        }
      }
    }
    .submit {
      margin-top: 94rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      border-radius: 10rpx;
      background: #ea5506;
      font-size: 32rpx;
      font-weight: 700;
      color: rgba(255, 255, 255, 1);
    }
  }
}

.space {
  height: 14rpx;
  background: #f5f5f5;
}

.active {
  background: #fff8f5 !important;
  border: 1px solid #ea5506 !important;
  .day,
  .date {
    color: #ea5506 !important;
  }
}

.flex-center {
  display: flex;
  align-items: center;
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  white-space: nowrap;
}
</style>
